<template>
  <div style="padding: 24px;">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本信息" name="first">
        <div class="container">
          <el-card shadow="hover" class="basic-information">
            <div class="tag">
              <h3>企业基本信息</h3>
            </div>
            <div class="input-container">
              <el-form ref="merchantForm" :model="merchant">
                <el-row :gutter="56">
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>企业名称</span>
                      <el-input v-model="merchant.company_name" size="medium" disabled />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>社会统一信用代码</span>
                      <el-input v-model="merchant.company_code" size="medium" disabled />
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="56">
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>企业类型</span>
                      <el-input
                        v-model="companyTypeMap[merchant.company_type_display]"
                        size="medium"
                        disabled
                      />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>企业所在省市区信息</span>
                      <el-cascader
                        ref="cascader"
                        v-model="merchant.selectedOptions"
                        size="medium"
                        :props="cascaderProps"
                        disabled
                      />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>企业所在详细地址</span>
                      <el-input v-model="merchant.address" size="medium" disabled />
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="56">
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>主营业务</span>
                      <el-input
                        v-model="merchant.company_main"
                        type="textarea"
                        size="medium"
                        :rows="1"
                        disabled
                      />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>企业实际省市区信息</span>
                      <el-cascader
                        ref="cascader_now"
                        v-model="merchant.selectedOptions_now"
                        disabled
                        size="medium"
                        :props="cascaderProps"
                      />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>企业实际详细地址</span>
                      <el-input v-model="merchant.on_address" size="medium" disabled />
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="56">
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>第一联系人</span>
                      <el-input v-model="merchant.contact" size="medium" disabled />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>联系方式</span>
                      <el-form-item prop="telephone">
                        <el-input v-model="merchant.telephone" size="medium" disabled />
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="input-wrapper">
                      <span>联系邮箱</span>
                      <el-form-item prop="email">
                        <el-input v-model="merchant.email" size="medium" disabled />
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
          <el-card shadow="hover" class="indicators">
            <h3>企业经营指标</h3>
            <div class="input-container">
              <el-form>
                <el-row :gutter="56">
                  <el-col :span="6">
                    <div class="input-wrapper">
                      <span>门市数量</span>
                      <el-input v-model="merchant.shop_number" size="medium" disabled />
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="input-wrapper">
                      <span>接待量</span>
                      <el-input v-model="merchant.reception_number" size="medium" disabled />
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="input-wrapper ability">
                      <span>是否有再次分销能力</span>
                      <el-select v-model="merchant.extend_agent" disabled>
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                      </el-select>
                      <!--                <el-input v-model="merchant.extend_agent" size="medium" />-->
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="input-wrapper">
                      <span>拓展规划</span>
                      <el-input
                        v-model="merchant.extend_content"
                        disabled
                        type="textarea"
                        size="medium"
                        :rows="1"
                      />
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="门票利润设置" name="second">
        <!-- 表格区域 -->
        <el-table
          height="75vh"
          :data="profitList"
          style="width: 100%"
          :header-cell-style="{color:'black'}"
        >
          <el-table-column label="商品编号" min-width="100px">
            <template v-slot="scope">
              {{ scope.row.baseProduct.code }}
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop width="196px">
            <template v-slot="scope">
              <span v-if="scope.row.description===undefined">----</span>
              <span v-else>
                <tool :content="scope.row.description">
                  {{ scope.row.description }}
                </tool>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="商品票型" min-width="70px">
            <template v-slot="scope">
              {{ ticketCategory[scope.row.ticketCategory] }}
            </template>
          </el-table-column>
          <el-table-column label="旅客类型" min-width="70px">
            <template v-slot="scope">
              {{ personType[scope.row.personType] }}
            </template>
          </el-table-column>
          <el-table-column label="单次购买上限" min-width="80px">
            <template v-slot="scope">
              数量>{{ scope.row.minQuantity }}~{{ scope.row.maxQuantity }}
            </template>
          </el-table-column>
          <el-table-column label="旅客年龄限制" min-width="80px">
            <template v-slot="scope">
              年龄 > {{ scope.row.personTypeMinAge }}~{{ scope.row.personTypeMaxAge }}
            </template>
          </el-table-column>
          <el-table-column label="退款政策" min-width="60px">
            <template v-slot="scope">
              {{ scope.row.refundable ? '允许':'拒绝' }}
            </template>
          </el-table-column>
          <el-table-column label="退票服务费" min-width="70px">
            <template v-slot="scope">
              <span v-if="scope.row.serviceFee">
                <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(scope.row.serviceFee)" placement="top-start">
                  <span>  ￥{{ scope.row.serviceFee }}</span>
                </el-tooltip>
              </span>
              <span v-else>
                ---
              </span>
            </template>
          </el-table-column>
          <el-table-column label="子级商户通用利润" min-width="100px">
            <template v-slot="scope">
              <el-tag v-if="ticketList.length === 0" type="warning" effect="dark">未设置</el-tag>
              <el-tag v-else-if="isProfitCom(scope.row.baseProduct.code)<0" type="warning" effect="dark">未设置</el-tag>
              <span v-else>

                <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(ticketList[profitNumCom(scope.row.baseProduct.code)].profit)" placement="top-start">
                  <span>  ￥{{ ticketList[profitNumCom(scope.row.baseProduct.code)].profit }}</span>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="子级独立利润" min-width="100px">
            <template v-slot="scope">
              <el-tag v-if="profit.length === 0" type="warning" effect="dark">未设置</el-tag>
              <el-tag v-else-if="isProfit(scope.row.baseProduct.code)<0" type="warning" effect="dark">未设置</el-tag>
              <span v-else>
                ￥{{ profit[profitNum(scope.row.baseProduct.code)].profit }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150px">
            <template v-slot="scope">
              <el-button type="text" @click="openDialog(scope.row.baseProduct.code)">设置利润</el-button>
              <el-button v-if="isProfit(scope.row.baseProduct.code)>=0 && profit.length !== 0" type="text" @click="deleteProfit(scope.row.baseProduct.code)">取消独立利润</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 设置利润弹出框 -->
        <el-dialog title="子级独立利润设置" :visible.sync="profitDialogVisible" width="30%">
          <el-slider v-model="profitValue" show-input :max="1000" :min="0" :step="0.01" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="profitDialogVisible = false">取 消</el-button>
            <el-button class="el-button-right" type="primary" @click="editProfit()">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getQueryChildInfo, queryArea, getProvince } from '@/api/merchant'
import { getProfitList, editProfit, deleteProfit, getTicketList } from '@/api/profit'
import tool from '@/components/tool'
export default {
  name: 'Chakan',
  components: { tool },
  data() {
    return {
      merchant: {},
      activeName: 'first',
      companyTypeMap: {
        TRIP_COMPANY: '旅游公司',
        CAR_COMPANY: '用车公司',
        GEO_COMPANY: '景区商家',
        VISA_COMPANY: '签证商务公司',
        OTHER_COMPANY: '其他'
      },
      cascaderProps: {},
      profitList: [],
      // 商品票型
      passTypeMap: {
        Seasonal: '季卡',
        Silver: '银卡',
        Gold: '金卡',
        Platinum: '白金'
      },
      // 商品类别
      ticketCategoryMap: {
        'Park Ticket': '公园门票',
        Express: '快速票',
        'VIP Experiences': 'VIP快速票',
        'Annual Pass': '年票'
      },
      profit: [],
      profitDialogVisible: false,
      profitValue: 0,
      profitCode: '',
      ticketList: []
    }
  },
  computed: {
    personType() {
      return JSON.parse(localStorage.getItem('init')).ticket.person_type
    },
    ticketCategory() {
      return JSON.parse(localStorage.getItem('init')).ticket.ticket_category
    }
  },
  created() {
    const that = this
    that.cascaderProps = {
      lazy: true,
      lazyLoad(node, resolve) {
        that.fetchLocalInfo(node, resolve)
      }
    }

    this.getQueryChildInfo()
    this.getProfitList()
    this.getTicketList()
  },
  methods: {
    getQueryChildInfo() {
      const uid = this.$route.query.uid
      getQueryChildInfo(uid).then((res) => {
        this.merchant = res.data.data
        console.log(this.merchant)
        // 级联选择器option -------
        this.merchant.selectedOptions = []
        this.merchant.selectedOptions.push(
          parseInt(this.merchant.province),
          parseInt(this.merchant.city),
          parseInt(this.merchant.area)
        )
        //
        this.merchant.selectedOptions_now = []
        this.merchant.selectedOptions_now.push(
          parseInt(this.merchant.on_province),
          parseInt(this.merchant.on_city),
          parseInt(this.merchant.on_area)
        )
        //
        setTimeout(() => {
          this.$refs.cascader.panel.lazyLoad()
          this.$refs.cascader_now.panel.lazyLoad()
        }, 1500)
      })
    },
    fetchLocalInfo(node, resolve) {
      if (node.root) {
        this.queryProvince(node, resolve)
        return
      }
      this.queryArea(node, resolve)
    },
    queryProvince(node, resolve) {
      getProvince().then((response) => {
        const data = response.data.data
        //
        const nodes = data.map((item) => ({
          value: item.code,
          label: item.name,
          leaf: false
        }))
        resolve(nodes)
      })
    },
    queryArea(node, resolve) {
      const level = node.level + 1
      queryArea(node.value, level).then((response) => {
        const data = response.data.data
        // if (data.length === 0) {
        //   node.data.leaf = true
        //   resolve([])
        //   return
        // }
        const nodes = data.map((item) => ({
          value: item.code,
          label: item.name,
          leaf: level === 3
        }))
        resolve(nodes)
      })
    },
    // 利润相关
    getProfitList() {
      const uid = this.$route.query.uid
      getProfitList(uid).then(res => {
        this.profitList = res.data.data.products
        console.log(123, res.data.data)
        this.profit = res.data.data.profit
      })
    },
    editProfit() {
      this.profitDialogVisible = false
      const query = {
        code: this.profitCode,
        merchant_uid: this.$route.query.uid,
        profit: this.profitValue
      }
      editProfit(query).then((res) => {
        this.$message({
          message: '设置成功',
          duration: 3000,
          showClose: true,
          type: 'success'
        })
        this.getProfitList()
      })
    },
    deleteProfit(code) {
      deleteProfit(this.$route.query.uid, code).then(res => {
        this.getProfitList()
        this.$message({
          duration: 3000,
          showClose: true,
          message: '取消成功，取消后您的子级商户门票价格可能与您相同',
          type: 'warning'
        })
      })
    },
    openDialog(code) {
      this.profitDialogVisible = true
      if (this.profit[this.profitNum(code)] === undefined) {
        this.profitValue = 0
      } else {
        this.profitValue = parseInt(this.profit[this.profitNum(code)].profit * 100) / 100
      }
      this.profitCode = code
    },
    isProfit(code) {
      if (this.profit.length === 0) {
        return false
      } else {
        return this.profit.findIndex(item => {
          return item.code === code
        })
      }
    },
    profitNum(code) {
      return this.profit.findIndex(item => {
        return item.code === code
      })
    },
    isProfitCom(code) {
      if (this.ticketList.length === 0) {
        return false
      } else {
        return this.ticketList.findIndex(item => {
          return item.code === code
        })
      }
    },
    profitNumCom(code) {
      return this.ticketList.findIndex(item => {
        return item.code === code
      })
    },
    getTicketList() {
      getTicketList().then((res) => {
        this.ticketList = res.data.data.profit
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header-wrapper {
  margin: 32px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-steps {
    min-width: 36vw;
    padding: 13px 64px;
    background-color: #f5f7fa;
  }
  .button-group {
    flex: 1;
    text-align: right;
  }
}

.basic-information {
  border: solid 1px #dddddd;
  h3 {
    margin: 0;
    margin-bottom: 24px;
  }
  .input-container {
    .input-wrapper {
      //width: 255px;
      margin-bottom:24px;
      span {
        display: inline-block;
        margin: 0 0 16px;
        font-size: 16;
        font-weight: bold;
      }
    }
  }
}

.indicators {
  border: solid 1px #dddddd;
  margin-top: 40px;
  h3 {
    margin: 0px;
    margin-bottom: 24px;
  }
  .input-container {
    .input-wrapper {
      //width: 255px;
      margin-bottom: 8px;
      span {
        display: inline-block;
        margin: 0 0 16px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

.qualification {
  border: solid 1px #dddddd;
  margin: 32px 16px 16px;
  h3 {
    margin: 0px;
  }
  .img-container {
    display: flex;
    justify-content: space-between;
    .img-item {
      h5 {
        font-weight: normal;
        margin-bottom: 16px;
        margin-top: 0;
      }
      div {
        width: 160px;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.tips {
  // position: absolute;
  color: red;
  margin-bottom: 0;
  // left: 1212px;
}
.el-cascader,
.el-select {
  display: block;
}
</style>
<style>
.el-tabs__header{
  margin-bottom: 40px !important;
}
</style>

